<template>
  <div class="security-manage">
    <div class="manage-title">
      <span>设备管理</span>
      <div class="manage-title-right" @click="getList">
        刷新<svg-icon iconClass="refresh" className="ml5" :size="14" />
      </div>
    </div>
    <ul class="device-list">
      <li class="device-item">
        <span>设备名称</span>
        <span class="header-time">登录时间</span>
      </li>
      <li
        v-for="item in deviceList"
        :key="item.device_id"
        class="device-item"
        :class="{ active: item.device_id === appInfo.uuid }"
      >
        <span class="device-name">
          <span>{{ item.device_name }}</span>
          <svg-icon icon-class="dev-edit" @click="renameDev(item)" />
          <span v-if="item.device_id === appInfo.uuid" class="active-tips"
            >当前设备</span
          >
        </span>
        <span class="login-time">{{ item.updated_at }}</span>
        <el-button size="small" @click="loginoutDevice(item)"
          >退出登录</el-button
        >
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import PsMessageBox from "@/components/message-box/index";
import { systemAppStore } from "@/stores/system";
import { userAppStore } from "@/stores/user";
import { getDeviceList, renameDevice, delDevice } from "@/api/user";
import { parseTime } from "@/utils";
const router = useRouter();
const _systemAppStore_ = systemAppStore();
const _userAppStore_ = userAppStore();
const { appInfo } = storeToRefs(_systemAppStore_);
const deviceList = ref<any[]>([]);
/** 获取设备列表 */
function getList() {
  getDeviceList({ uuid: appInfo.value.uuid })
    .then((res) => {
      deviceList.value = (res.data || [])
        .map((it: any) => {
          it.updated_at = parseTime(it.updated_at);
          return it;
        })
        .sort((a: any) => (a.device_id === appInfo.value.uuid ? -1 : 1));
    });
}
/** 设备重命名 */
function renameDev(item: any) {
  PsMessageBox.prompt("设备重命名：", {
    inputValue: item.device_name,
    beforeClose: (action: string, instance: any, done: any) => {
      if (action === "confirm") {
        instance.confirmButtonLoading = true;
        renameDevice({ id: item.id, name: instance.inputValue.trim() })
          .then(() => {
            getList();
            done();
          })
          .finally(() => {
            instance.confirmButtonLoading = false;
          });
      } else {
        done();
      }
    },
    inputValidator: (value: string) => {
      if (!value.trim()) return "设备名不能为空";
      // eslint-disable-next-line no-control-regex
      const str = value.replace(/[^\x00-\xff]/g, "01");
      if (str.length > 30) return "设备名已超过最长限制";
      return true;
    }
  });
}

/** 设备退出登录 */
function loginoutDevice(item: any) {
  PsMessageBox({
    iconClass: "",
    message: "您的账号将在该设备上自动退出登录",
    center: true
  }).then(() => {
    delDevice(item.id)
      .then(() => {
        if (item.device_id === appInfo.value.uuid) {
          _userAppStore_.resetUserInfo();
          router.push("/");
        } else {
          getList();
        }
      });
  });
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.device-list {
  padding-left: 12px;
}
.device-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 10px;
  &:first-child {
    padding-top: 24px;
    padding-bottom: 14px;
    & ~ .device-item:not(.active) {
      color: var(--el-text-color-regular);
    }
  }
  &.active {
    &::before {
      position: absolute;
      left: -12px;
      content: "";
      width: 6px;
      height: 6px;
      background: #49d61c;
      border-radius: 50%;
    }
    .btn-mini-grey {
      border-color: #00bbd7;
      background-color: transparent;
      color: #00bbd7;
      &:hover {
        background-color: #00bbd7;
      }
    }
  }
  .header-time {
    position: absolute;
    right: 193px;
  }
  .device-name {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    span {
      max-width: 301px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .svg-icon {
      flex-shrink: 0;
      margin-left: 6px;
      color: var(--el-text-color-regular);
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
    .active-tips {
      margin-left: 10px;
      padding: 6px 10px;
      background: var(--el-color-primary);
      border-radius: 6px;
      font-size: 12px;
      color: #fff;
    }
  }
  .login-time {
    flex: 0 0 160px;
    margin: 0 20px 0 30px;
  }
  .el-button {
    min-width: 96px;
    height: var(--el-button-size);
    --el-button-size: 34px;
    --el-button-bg-color: #e6e6ec;
    --el-button-border-color: #e6e6ec;
    --el-button-text-color: var(--el-text-color-primary);
  }
}
</style>
